<template>
	<div class="header">
		<img src="../../../assets/images/logo.png" class="logo" />
		<ul class="menus" :style="{'display':isaBool?'none':'block'}">
			<li>推荐</li>
			<li>书库</li>
			<li>榜单</li>
		</ul>
		<div class="search" :style="{'width':isaBool?'20rem':'2rem'}">
			<form :style="{'background-color':isaBool?'white':'unset'}">
				<input placeholder="请输入搜索的书籍名称" />
				<aside @click="isaBool=!isaBool">
					<img src="../../../assets/images/search.png" />
				</aside>
			</form>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'ModileHeader',
		data() {
			return{
				isaBool:false,
			}
		},
		methods:{
			
		}
	}
</script>

<style scoped>
	.header {
		width: 100%;
		height: 3.5rem;
		background-color: #2c2d2f;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		/* position: relative; 定位的元素保留原本的位置 */
		/* position: absolute;	定位的元表婚弃原来的位置，被其他标签质替 */
	}

	.header .logo {
		margin-left: 0.5rem;
	}

	.header .menus {
		margin: 0;
		padding: 0;
		list-style: none;
		width: 55%;
		height: 100%;
		color: white;
		/* 默认显示，动画开始的时候，设置为隐藏状态 */
		display: block;
		
	}

	.header .menus li {
		width: 33.33%;
		float: left;
		/* 并排 */
		height: 3.5rem;
		line-height: 3.5rem;
		text-align: center;
		/* 据中 */
	}

	.header .search {
		position: relative;
		righet: 0.5rem;
		/* 默认div标签没有宽度，动画开始时，设置20rem的宽度 */
		width: 2rem;
		height: 2rem;
	}


	.header .search form {
		/* 默认白色背号去草；动画开始时 ，设置白色背景色*/
		background-color: unset;
		border-radius: 4.5rem;
		height: 2rem;
		overflow: hidden;
		/* 意出隐藏 */
	}

	.header .search form input {
		width: 12rem;
		border: none;
		border-radius: 4.5rem;
		position: absolute;
		outline: none;
		text-indent: 0.3em;
		z-index: 10;
		/* 默认隐藏 */
		display: none;
	}

	.header .search form aside {
		background-color: #2c2d2f;
		width: 1.8rem; 
		height: 1.8rem;
		border-radius: 50%;
		float: right;
		text-align: center;
		line-height: 1.8rem;
		border: 0.1rem solid white;
		

	}


	/* ·PC端的事件. 事件:手让事件/手势事件 tolch  */
	/* hover属于PC端的鼠标作，不适合在移动城运行 */
	/* .header .search :hover { */
		/* 动画的名宇 动画的时长 动画的速度 */
		/* animation: formWidth 1s linear; */
	/* } */
	
	@keyframes formWidth {
		0% {
			width: 2rem;
		}

		100% {
			width: 20rem;
		}
	}
</style>